<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{/common/header::header-head}">
</head>
<body>
<div th:replace="~{/common/header::header-body}"></div>

<div class="container mt-3 text-justify-center">
    <a th:href="@{/back/article/add}" type="button" class="btn btn-primary">新增文章</a>
    <table class="table table-striped">
        <thead>
        <tr>
            <th>文章标题</th>
            <th>创建时间</th>
            <th>分类标签</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="article:${articles}">
            <td th:text="${article.getTitle()}">1</td>
            <td th:text="${#dates.format(article.getDate())}">2</td>
            <td th:text="${article.getCategory()}">3</td>
            <td>
<!--                <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#myModal">详情</button>-->

<!--                &lt;!&ndash; 模态框显示文章详情 &ndash;&gt;-->
<!--                <div class="modal fade" id="myModal">-->
<!--                    <div class="modal-dialog">-->
<!--                        <div class="modal-content">-->

<!--                            &lt;!&ndash; 模态框头部 &ndash;&gt;-->
<!--                            <div class="modal-header">-->
<!--                                <h4 class="modal-title" th:text="${article.getTitle()}">模态框标题</h4>-->
<!--                                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>-->
<!--                            </div>-->

<!--                            &lt;!&ndash; 模态框内容 &ndash;&gt;-->
<!--                            <div class="modal-body" th:text="${article.getContent()}">-->
<!--                                模态框内容..-->
<!--                            </div>-->

<!--                            &lt;!&ndash; 模态框底部 &ndash;&gt;-->
<!--                            <div class="modal-footer">-->
<!--                                <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>-->
<!--                            </div>-->

<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

                <a class="btn btn-info" href="#" th:title="${article.getTitle()}" data-bs-toggle="popover" data-bs-trigger="focus" th:data-bs-content="${article.getContent()}">详情</a>
                <a th:href="@{'/back/article/edit/'+${article.getId()}}">
                    <button type="button" class="btn btn-primary">修改</button>
                </a>
                <button type="button" class="btn btn-danger" th:onclick="deleteArtcile([[${article.getId()}]])">删除</button>
            </td>
        </tr>
        </tbody>
    </table>

</div>
</body>
<script>
    function deleteArtcile(id){
        if (confirm("确认删除？")){
            location.replace(location.protocol+"//"+location.host+"/back/article/delete/"+id);
        }
    }

    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    })
</script>
</html>